import { useEffect } from "react";

export function useOnClickOutside(ref, handler) {
	useEffect(() => {
		const listener = (event) => {
			// Do nothing if clicking ref's element or its children
			if (!ref.current || ref.current.contains(event.target)) {
				return;
			}

			handler(event);
		};

		// Attach the listener to the document
		document.addEventListener("mousedown", listener, { passive: true });

		// Attach the listener to the react-flow instance
		const reactFlowContainer = document.querySelector(".react-flow");
		if (reactFlowContainer) {
			reactFlowContainer.addEventListener("mousedown", listener, {
				passive: true,
			});
		}

		// Clean up the listener when the component is unmounted
		return () => {
			document.removeEventListener("mousedown", listener);
			if (reactFlowContainer) {
				reactFlowContainer.removeEventListener("mousedown", listener);
			}
		};
	}, [ref, handler]); // Rerun only if ref or handler changes
}
